阿嬤都看得懂的基礎 CSS 樣式－文字篇與標籤換行 bug

歡迎阿嬤們回到今天的戲說啊不是，是你阿嬤成為網頁工程師的第一步。昨天我們學會了 HTML 標籤怎麼寫，也學會將個別的 HTML 標籤穿上 CSS 樣式。我們稍微複習一下昨天的內容：

• HTML 標籤由角號與其包裹起來的標籤名稱形成，不同的標籤名稱決定了這些 HTML 標籤對應到不同類型的網頁元素。例如，<p> 這個標籤對應的是文字段落元素，而 <div> 對應的是區塊元素。
• 如果某個 HTML 標籤對應的元素有可能包含其他元素，這個 HTML 標籤會有另個成對的結束標籤，反之則否。結束標籤是在左角號與標籤名稱間，加入斜線 "/"，例如 </p>。
• 我們可以在個別的 HTML 標籤中加上行內樣式，作法是在 HTML 的標籤名稱與右角號間加上 "style"，後面加上等號與一對引號，並且在引號內放入各種屬性與值的配對，這些配對用半形分號隔開。

因此，具備行內樣式的 HTML 標籤看起來長這樣：

<div style="width: 80%; height: 20%; background-color: pink"></div>

到這邊聽起來都很美好，只要我們把每個標籤可以有的屬性與值都學會，我們就是網頁工程師了對吧？那讓我們趕快來學學這些屬性和值吧！耶～本系列文章又要結束囉！作者表示爽！

這麼樂觀有衝勁是很好啦，我們就先來看看些常用的樣式吧！在網頁中，我們會看見哪些類型的元素，它們又具備哪些樣式呢？在網頁中，我們經常看見文字、圖片，還有就是昨天介紹的區塊。

在文字方面，大概可以想到和個別文字相關的屬性，例如字型、大小、粗細，這些屬性的前綴都是 font-，也可以想到和整行文字相關的屬性，例如對齊、裝飾、縮排、行高、字距等等。整行文字比較麻煩，多數屬性的前綴是 text-，其他就需要稍微記憶一下了！當然，文字相關的屬性也不只這邊介紹的這些，這邊只是列舉出比較常用的喔！

• 字型：font-family，值就是字型名稱。
• 字型大小：font-size，值可以是文字，例如 small, medium, large；但是這就有點難控。也可以是數字加上長度單位，長度單位可以先使用 px，例如 12px 就相當於常見的 12 點字。這邊要注意，數字和單位中間必須緊密貼合，不可以有空格喔！至於 px 是什麼，我們先就把它當作一個電腦中常見的絕對長度單位，在後面會詳細說明！
• 字型粗細：font-weight，值可以是文字，例如 thin, normal, bold，不過通常會設定 100-900。
• 文字對齊：text-align，值是文字，例如 left, center, right。
• 文字裝飾：text-decoration，這是增加底線 (underline)、刪除線 (line-through)、上置線 (overline) 的屬性；線條還可以選擇樣式和顏色，例如：波浪 (wavy)、虛線 (dashed)、紅色 (red)、藍色 (blue)。這些值之間記得要用空白隔開喔！
• 文字外框：outline，值和文字裝飾相同。
• 首行縮排：text-indent，值是數字加上長度單位。
• 文字行高：line-height，值是數字加上長度單位。
• 字距：letter-spacing，值是數字加上長度單位。
• 文字顏色：其實就是 color，值目前先使用表示顏色的英文文字吧！之後我們會討論怎麼使用數字表達顏色喔！至於有哪些顏色的英文文字可以使用，可以參考這裡喔！

我們來寫幾個花俏繽紛的文字來玩玩吧！不過，在那之前，你阿嬤可能會很好奇，該怎麼在同一行的文字當中，對不同的文字增加不同的樣式呢？因為如果樣式只能夠寫在 p 標籤，那不就改樣式就會換行了？

有些阿嬤可能會說，我們學過預設不換行的標籤啊，像是 strong 就是。不過，strong 標籤會把文字變粗，那該怎麼辦呢？還是我們就把 strong 標籤中加上樣式，把 font-weight 改成 normal 就好了？這也是個方法，可是其實還有個更簡單的解法：我們可以使用 span 標籤。span 標籤預設不換行，也沒有其他的樣式，專門是為了給個別文字加上樣式，所使用的喔！

那我們就來嘗試看看 span 標籤吧！不過，在那之前，我們來想想怎麼寫比較好。我們可能會覺得，不就直觀寫成一行就好了？所以寫起來會看起來像這樣：

<p><span>哈</span><span>囉</span><span>阿</span><span>嬤</span><span>！</span></p>

也是可以，但是就連還沒加上樣式，看起來都還是太長了！

因此，在我們寫 HTML 時，通常會把各個標籤分行，並且把子元素的標籤作縮排，看起來會像這樣：

<p>
	<span>哈</span>
	<span>囉</span>
	<span>阿</span>
	<span>嬤</span>
	<span>！</span>
</p>

不過，當我們這樣作以後，會發現文字之間出現了奇怪的空格：

這其實是 HTML 換行時，在瀏覽器上渲染的 bug。無論是 span 或 div 標籤，都會發生這個問題。這個問題的解法，是把結束標籤的右角號移到下一行，和下個標籤連在一起：

<p>
   <span>哈</span
  ><span>囉</span
  ><span>阿</span
  ><span>嬤</span
  ><span>！</span>
</p>

這樣就會恢復正常囉！

那就讓我們給阿嬤個炫炮的哈囉吧！

<p>
  <span style="font-weight:800; color: purple; text-decoration: underline dashed">哈</span
  ><span style="font-size:20px; color: darkblue; outline: solid 1px">囉</span
  ><span style="font-family:標楷體; font-weight: bold; color: red; text-decoration: overline wavy">阿</span
  ><span style="color: brown; outline: dotted 2px">嬤</span
  ><span style="color: green; outline: double 1px">！</span>
</p>